{% extends "layout/base.html" %}
{% load static %}
{% block css %}
    <link rel="stylesheet" href="{% static 'app01/css/account.css' %}">
{% endblock %}

{% block breadcrumb %}
    <ol class="breadcrumb float-sm-left">
        <li class="breadcrumb-item"><a href="{% url 'index' %}">项目列表</a></li>
        <li class="breadcrumb-item active">批量上传用例</li>
    </ol>
{% endblock %}

{% block content %}
    <div class="alert alert-warning alert-dismissible fade show" id="p1">
        <h6> 重要提示!</h6>
        <span id="error">
             只能上传Excel文件,
             Excel表格设计字段的时候，参考数据库的字段设计，方便上传文件
        </span>
    </div>


    <div class="card w-50">
        <div class="card-body">
            <h5 class="card-title">文件上传</h5>
            <p><input type="file" id="ajaxFile" name="file"></p>
            <button id="ajaxBtn" class="btn btn-primary btn">上 传</button>
            <input type="hidden" id="it_obj_pk" value="{{ it_obj_pk }}">
        </div>
        {% csrf_token %}
    </div>

{% endblock %}

{% block js %}
    <script>
        $("#ajaxBtn").click(function () {
            var it_obj_pk = $("#it_obj_pk").val();
            var form_obj = new FormData();
            form_obj.append("f1", $("#ajaxFile")[0].files[0]); //使用jQuery获取文件对象
            form_obj.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
            form_obj.append("it_obj_pk", it_obj_pk);
            $.ajax({
                url: "{% url 'upload' it_obj_pk %}",
                type: "POST",
                data: form_obj,
                processData: false, // 不需要处理数据的编码格式
                contentType: false, // 不需要处理contentType的请求头
                success: function (dataMsg) {
                    if (dataMsg['status'] == 500) {
                        $("#p1").attr("class", "alert my-alert-danger alert-dismissible");
                        $("#error").text(dataMsg['errors'])
                    } else {
                        window.location.href = dataMsg["path"]
                    }
                }
            })
        })
    </script>
{% endblock %}